<template>
    <div class="container">
        <Navbar :title="title" left-text="返回" left-arrow @click-left="goBack" fixed placeholder></Navbar>

        <div class="user" :style="{ background: 'url(' + user.cover_text + ')' }">
            <div class="user-image">
                <img :src="user.avatar_text" alt="" />
            </div>
        </div>

        <van-form @submit="onSubmit">

            <van-field label-width="4rem" label-align="center" name="email" label="邮箱" placeholder="邮箱" readonly
                v-model="user.email" />

            <!-- <van-field label-width="4rem" label-align="center" v-model="vercode" name="vercode" label="验证码"
                placeholder="验证码" /> -->

            <van-field v-model="vercode" center clearable label="验证码" placeholder="请输入验证码" label-align="right"
                label-width="60px" v-if="user.auth == 0" v-show="Email" name="vercode">
                <template #button>
                    <van-count-down v-show="Stime" :auto-start="false" millisecond :time="time" format="ss秒"
                        ref="countDown" @finish="onFinish" />
                    <van-button size="small" type="primary" @click="onEmail" v-show="Btn">发送验证码</van-button>
                </template>
            </van-field>

            <div style="margin: 16px">
                <van-button round block :disabled="user.auth == 1 ? true : false"
                    :type="user.auth == 0 ? 'primary' : 'success'" native-type="submit">
                    {{ user.auth == 1 ? '已认证' : '认证' }}
                </van-button>
            </div>
        </van-form>

    </div>
</template>

<script>
import Navbar from '../Navbar.vue'
export default {
    name: "Email",
    data() {
        return {
            title: '邮箱验证',
            user: this.$cookies.get("ShopUser"),
            vercode: '',
            time: 10 * 1000,
            Stime: false,
            Btn: true,
            Email: true
        }
    },
    methods: {
        goBack() {
            this.$router.push('/user/base/index');
        },
        async onSubmit(val) {
            let res = await this.$api.EmailCheck(val);

            if (res.code === 1) {
                this.$notify({
                    type: "success",
                    message: res.msg,
                    duration: 1000
                });
                this.user.auth = res.data.auth;
                this.Email = false;
            } else {
                this.$notify({
                    type: "danger",
                    message: res.msg,
                    duration: 1000
                });
            }
        },
        onFinish() {
            this.Btn = true
            this.Stime = false
            this.$refs.countDown.reset()
        },
        async onEmail() {
            this.Btn = false
            this.Stime = true
            this.$refs.countDown.start()

            let res = await this.$api.vercode({ id: this.user.id });

            if (res.code === 1) {
                this.$notify({
                    type: "success",
                    message: res.msg,
                    duration: 1000
                });
            } else {
                this.$notify({
                    type: "danger",
                    message: res.msg,
                    duration: 1000
                });
            }

        }
    },
    components: {
        Navbar
    },
    created() {

    },
}
</script>

<style scoped>
</style>